<!-- 盘煤记录 -->
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { EditPen, Refresh } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// table-list 搜索
const searchTime = ref('')

const coalListData = ref(['1#煤场', '2#煤场', '3#煤场'])
const coalIndex = ref(0)

function clickCoal(index: number) {
    coalIndex.value = index
}

const searchTimeIndex = ref(0)
function clickSearchTime(index: number) {
    searchTimeIndex.value = index
    searchTime.value = ''
}
function changeSearchTime() {
    searchTimeIndex.value = 3
}

//table设置
const tableHeight = ref(0)
const listTableData = [
    {
        id: 1,
        name: '1#煤场1',
        time: '2023-09-09  10:00:00',
        name1: '76278',
        name2: '76278',
        name3: '1',
        name4: 'web',
        name5: 'A值',
        name6: '自动测量',
    },
    {
        id: 2,
        name: '1#煤场2',
        time: '2023-09-09  10:00:00',
        name1: '76278',
        name2: '76278',
        name3: '1',
        name4: 'web',
        name5: 'A值',
        name6: '自动测量',
    },
    {
        id: 3,
        name: '1#煤场3',
        time: '2023-09-09  10:00:00',
        name1: '76278',
        name2: '76278',
        name3: '1',
        name4: 'web',
        name5: 'A值',
        name6: '自动测量',
    },
    {
        id: 4,
        name: '1#煤场4',
        time: '2023-09-09  10:00:00',
        name1: '76278',
        name2: '76278',
        name3: '1',
        name4: 'web',
        name5: 'A值',
        name6: '自动测量',
    },
   
]


//table 多选
// const multipleSelection = ref([])
// const handleSelectionChange = (val: never[]) => {
//     multipleSelection.value = val
// }

// 定义表格数据的类型
interface TableRow {
  id: number;
  time: string;
  name: string;
  name1: string;
}

// 保存选中项的 ID 列表
const selectedRowIds = ref<Set<number>>(new Set());

// 处理选中项变化的函数
const handleSelectionChange = (selection: TableRow[]) => {
    // 更新选中项 ID 列表
    selectedRowIds.value = new Set(selection.map((item) => item.id));
};

// 自定义行类名的函数
const rowClassName = ({ row }: { row: TableRow }): string => {
  return selectedRowIds.value.has(row.id) ? 'selected-row' : '';
};

const rowInfoClassName = (id:number) => {
    return selectedRowIds.value.has(id) ? 'selected_bg' : '';
}

onMounted(() => {
    // 获取页面高度
    tableHeight.value = window.innerHeight - 310;
});

//table样式自定义
const headerCellStyle = {
    padding:'16px 0'
}
const headerRowStyle = {
    backgroundColor: "#CCDDF9",
    color: "#333",
    fontWeight: "bold"
}


//table 保存修改
function tableDataSave() {
    tableDialogVisible.value = true
    
    
}
const tableDialogVisible = ref(false)
function clickTableDialog(){
    tableDialogVisible.value = false
    ElMessage({
        message: '已修改，数据已更新',
        type: 'success',
    })
    //ElMessage.error('修改失败，请重新提交')
}

// 圆仓
const siloDialogVisible = ref(false)
function clickSiloDialog(){

}
const siloDialogVisible2 = ref(false)
</script>
<template>
    <!-- 圆仓弹出框2 -->
    <el-dialog v-model="siloDialogVisible2" title="圆仓" width="1700" :align-center="true">
        <div class="silo_dialog" style="align-items: stretch;">
            <div class="silo_photo" style="margin-right: 15px;display: flex;flex-direction: column;justify-content: space-between;">
                <ul class="info">
                    <li>
                        <span>盘存重量(吨)</span>
                        <p>127157</p>
                    </li>
                    <li>
                        <span>与前次盘煤重量差(吨)</span>
                        <p>+789</p>
                    </li>
                    <li>
                        <span>盘煤时间</span>
                        <p>2023-09-09  10:00:00</p>
                    </li>
                </ul>
                <div class="ph_box" style="height: 600px;">
                    <img class="ph"src="../../assets/img/ph_3d.jpg" alt="">
                    <p>查看三维模型</p>
                </div>
                
            </div>

            <div class="pile_right table_info small2">
                <h3>煤场情况一览表</h3>
                <table>
                    <colgroup>
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                        <col width="5.2%">
                    </colgroup>
                    <tr>
                        <td colspan="5">截止日期：2020-09-09  10:00</td>
                        <td colspan="8">煤质更新至178航次</td>
                        <td colspan="3">预估总存量</td>
                        <td colspan="3">1989280吨</td>
                    </tr>
                    <tr class="bg_yellow">
                        <td></td>
                        <td colspan="3">360°-300°</td>
                        <td colspan="3">300°-240°</td>
                        <td colspan="3">240°-180°</td>
                        <td colspan="3">180°-120°</td>
                        <td colspan="3">120°-60°</td>
                        <td colspan="3">60°-0°</td>
                    </tr>
                    <tr>
                        <th>存量</th>
                        <td></td>
                        <td>1738</td>
                        <td></td>

                        <td>42</td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td>988</td>
                        <td>988</td>

                        <td></td>
                        <td>42</td>
                        <td></td>

                        <td>9988</td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>航次</th>
                        <td></td>
                        <td>1738</td>
                        <td></td>

                        <td></td>
                        <td></td>
                        <td>42</td>

                        <td>9988</td>
                        <td>988</td>
                        <td>988</td>

                        <td></td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>港口</th>
                        <td></td>
                        <td>1738</td>
                        <td></td>

                        <td></td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td>988</td>
                        <td>988</td>

                        <td></td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td></td>
                        <td>42</td>
                    </tr>
                    <tr>
                        <th>煤种</th>
                        <td>奥煤</td>
                        <td>奥煤</td>
                        <td>奥煤</td>

                        <td></td>
                        <td></td>
                        <td></td>

                        <td class="bg_green">印尼</td>
                        <td class="bg_red">印尼</td>
                        <td class="bg_purple">印尼</td>

                        <td class="bg_gray">印尼</td>
                        <td></td>
                        <td></td>

                        <td>印尼</td>
                        <td>印尼</td>
                        <td></td>

                        <td>9988</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>存量</th>
                        <td></td>
                        <td>1738</td>
                        <td></td>

                        <td></td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td>988</td>
                        <td>988</td>

                        <td></td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <th>存量</th>
                        <td></td>
                        <td>1738</td>
                        <td></td>

                        <td></td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td>988</td>
                        <td>988</td>

                        <td></td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td></td>
                        <td></td>

                        <td>9988</td>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr class="table_bg">
                        <td colspan="4">预估总存量</td>
                        <td colspan="3">78092</td>
                        <td colspan="3">硫加权平均值</td>
                        <td colspan="3">0.78</td>
                        <td colspan="3">热值权平均值</td>
                        <td colspan="3">0.78</td>
                    </tr>
                </table>
                
                <h3 class="mt15">煤种信息</h3>
                <table>
                    <colgroup>
                        <col width="25%">
                        <col width="25%">
                        <col width="25%">
                        <col width="25%">
                    </colgroup>
                    <tr>
                        <th>所属煤场</th>
                        <td>1#煤场</td>
                        <th>所在煤区</th>
                        <td>A区</td>
                    </tr>
                    <tr>
                        <th>所属煤种</th>
                        <td>褐煤</td>
                        <th>重量</th>
                        <td>1000</td>
                    </tr>
                    <tr>
                        <th>体积</th>
                        <td>38490</td>
                        <th>密度</th>
                        <td>1</td>
                    </tr>
                </table>

                <h3 class="mt15">煤质信息</h3>
                <table>
                    <tr>
                        <th>全水分</th>
                        <th>内水分</th>
                        <th>挥发分</th>
                        <th>固定碳</th>
                        <th>灰分</th>
                        <th>硫S</th>
                        <th>灰熔点t2</th>
                        <th>发热量</th>
                        <th>软化温度</th>
                    </tr>
                    <tr>
                        <td>15%</td>
                        <td>15%</td>
                        <td>15%</td>
                        <td>15%</td>
                        <td>15%</td>
                        <td>15%</td>
                        <td>15%</td>
                        <td>15%</td>
                        <td>15%</td>
                    </tr>
                </table>
            </div>

        </div>
    </el-dialog>

    <!-- 圆仓弹出框 -->
    <el-dialog v-model="siloDialogVisible" title="圆仓" width="1500" :align-center="true">
        <div class="silo_dialog">
            <div class="silo_photo">
                <ul class="info">
                    <li>
                        <span>盘存重量(吨)</span>
                        <p>127157</p>
                    </li>
                    <li>
                        <span>与前次盘煤重量差(吨)</span>
                        <p>+789</p>
                    </li>
                    <li>
                        <span>盘煤时间</span>
                        <p>2023-09-09  10:00:00</p>
                    </li>
                </ul>
                <div class="ph_box">
                    <img class="ph"src="../../assets/img/head.jpg" alt="">
                </div>
                
            </div>
            <div class="silo_info">
                <div class="alert">
                    <img src="../../assets/img/ico_7.png" alt="">
                    <p>提示：点击图片各个煤区，可以查看煤区的详细信息</p>
                </div>
                <div class="table_info">
                    <table>
                        <colgroup>
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                        </colgroup>
                        <tr>
                            <th>煤场名称</th>
                            <td>1#煤场</td>
                            <th>分区名称</th>
                            <td>0°-60°</td>
                        </tr>
                        <tr>
                            <th>盘煤时间</th>
                            <td>2023-09-09 10:00:01</td>
                            <th>登记人</th>
                            <td>王小丫</td>
                        </tr>
                    </table>
                    <h3>存煤明细</h3>
                    <table>
                        <colgroup>
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                            <col width="25%">
                        </colgroup>
                        <tr>
                            <th>品名</th>
                            <th>所属煤种</th>
                            <th>堆体重量</th>
                            <th>堆体体积</th>
                        </tr>
                        <tr>
                            <td><a href="#" class="table_link" target="_blank">HM-20230909</a></td>
                            <td>褐煤</td>
                            <td>13092</td>
                            <td>13092</td>
                        </tr>
                    </table>
                    <h3>备注</h3>
                    <div class="beiz">
                        <p>1、于2020-09-09  10:00:09产生盘煤记录</p>
                        <p>2、王小丫在2020-09-10  12:33:09产生盘煤记录</p>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>

    <!-- 弹出框 -->
    <el-dialog v-model="tableDialogVisible" width="400" :align-center="true" center>
        <div class="table_dialog">
            <img src="../../assets/img/ico_5.png" alt="">
            <strong>您确定要保存修改内容吗？</strong>
            <span>
                修改内容保存后不可撤回，且会覆盖之前数据
            </span>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="tableDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="clickTableDialog">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

    <div class="record_search">
        <div class="name">所属煤场:</div>
        <ul class="record_search_tab">
            <li :class="coalIndex == index ? 'hover' : ''" v-for="(item, index) in coalListData" @click="clickCoal(index)">{{
                item }}</li>
        </ul>
        <div class="record_search_time">
            <div class="name">盘煤时间:</div>
            <div class="item"><el-button :class="searchTimeIndex == 0 ? 'hover' : ''"
                    @click="clickSearchTime(0)">近一天</el-button></div>
            <div class="item"><el-button :class="searchTimeIndex == 1 ? 'hover' : ''"
                    @click="clickSearchTime(1)">近一周</el-button></div>
            <div class="item"><el-button :class="searchTimeIndex == 2 ? 'hover' : ''"
                    @click="clickSearchTime(2)">近一个月</el-button></div>
            <div class="item">
                <el-date-picker v-model="searchTime" type="date" placeholder="请选择" @change="changeSearchTime" />
            </div>
            <div class="item">
                <el-button type="primary" color="#2565C8">搜索</el-button>
            </div>
            <div class="item">
                <el-button style="padding:0 8px;">
                    <el-icon size="20">
                        <Refresh />
                    </el-icon>
                </el-button>
            </div>

        </div>
    </div>

    <div class="box_bg mt15">
        <div class="record_set">
            <el-button type="primary" color="#2565C8" @click="siloDialogVisible2 = true">盘煤设置</el-button>
        </div>
        <div class="table_list mt15">
            <el-table
                :data="listTableData" 
                size="large" 
                :border="false" 
                :stripe="false" 
                :highlight-current-row="false"
                :height="tableHeight"
                :header-cell-style="headerCellStyle"
                style="width: 100%;" 
                :row-class-name="rowClassName"
                ref="multipleTableRef"
                @selection-change="handleSelectionChange">
                
                <el-table-column type="selection" width="50" align="right" />
                <el-table-column type="expand">
                    <template #default="props">
                        <div class="table_list_info" :class="rowInfoClassName(props.row.id)">
                            <div class="info_photo">
                                <img src="../../assets/img/ph_3d.jpg" alt="">
                            </div>
                            <div class="table_info">
                                <table>
                                    <tr>
                                        <th colspan="3">与前次盘煤相比</th>
                                        <th rowspan="2">盘存文件</th>
                                    </tr>
                                    <tr>
                                        <th>堆煤</th>
                                        <th>取煤</th>
                                        <th>变化值</th>
                                    </tr>
                                    <tr>
                                        <td>4544吨</td>
                                        <td>3289吨</td>
                                        <td><p>+300</p></td>
                                        <td>2020-09-08  11:30:00</td>
                                    </tr>
                                </table>
                            </div>
                            <!-- 
                                <el-table :data="props.row.info" :border="true" :header-cell-style="headerRowStyle" style="width: 100%">
                                    <el-table-column align="center" label="与前次盘煤相比" prop="name">
                                        <el-table-column align="center" label="堆煤" prop="infoName1" />
                                        <el-table-column align="center" label="取煤" prop="infoName2" />
                                        <el-table-column align="center" label="变化值" prop="infoName3" />
                                    </el-table-column>
                                    <el-table-column align="center" label="盘存文件" prop="infoName4" />
                                </el-table>
                            -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="煤场名称" prop="name" />
                <el-table-column label="盘煤时间" prop="time" min-width="150" />
                <el-table-column label="盘煤重量(吨）" prop="name1" />
                <el-table-column label="堆体体积" prop="name2" />
                <el-table-column label="密度" prop="name3">
                    <template #default="props">
                        <el-input v-model="props.row.name3" :suffix-icon="EditPen" />
                    </template>
                </el-table-column>
                <el-table-column label="登记班组" prop="name4" />
                <el-table-column label="登记人" prop="name5" />
                <el-table-column label="来源" prop="name6" />
                <el-table-column align="center" label="操作" min-width="200">
                    <template #default="scope">
                        <div class="table_btn">
                            <a href="javascript:;" @click="tableDataSave">修改</a>|
                            <RouterLink to="">编辑</RouterLink>|
                            <RouterLink to="/stock/record/info">查看详情</RouterLink>|
                            <RouterLink to="/stock/record/report">报告</RouterLink>
                        </div>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="pagination">
            <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>

    </div>
    <router-view />
</template>
<style scoped lang="scss">
::v-deep(.el-table__body-wrapper){
    background: #F6FAFE !important;
}
::v-deep(.el-table__inner-wrapper:before){
    display: none; //下边线
}
::v-deep(.el-table thead th) {
  color: #333 !important;
  background: #CCDDF9;
}
::v-deep(.el-table__body){
    border-spacing: 0px 13px !important;
}
::v-deep(.el-table__row td){
    border-top:1px solid #E0E5ED !important;
    border-bottom:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:first-child){
    border-left:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row td:last-child){
    border-right:1px solid #E0E5ED !important;
}
::v-deep(.el-table__row:hover td){
    background: #ecf5ff!important;
}
::v-deep(.el-table__expanded-cell){
    border:1px solid #E0E5ED !important;
    padding:0 !important;
    //border-top: none !important; 
}
// ::v-deep(.el-table__expanded-cell td){
//     background: #ecf5ff!important;
// }
::v-deep(.el-table__expanded-cell:hover) {
  background-color: #ecf5ff !important;
}
::v-deep(.el-table__row.selected-row td){
    background: #FFDE9A !important;
}
</style>